<template>
	<view class="anmed">
		<view class="my-top">
			<image class="header" src="https://xcx.xiaombt.com/img/img/header.png" mode="" :style="{ height: navbarHeight + 'px' }">
			</image>
			<view class="nav">
				<u-navbar title="咨询" :autoBack='true' bgColor="transparent" leftIconColor='#6C5D47'
					titleStyle='color:#6C5D47' placeholder>
				</u-navbar>
			</view>
		</view>
		<view class="main" :style="{ marginTop: viewHeight + 'px' }">
			
			<view class="nav">
				<view class="item" v-for="item in nav" :key="item.id" @click="navClick(item.id)">
					{{item.title}}
				</view>
			</view>
			<view class="item2">
				<image class="title" src="https://xcx.xiaombt.com/img/img/zixun.png" mode=""></image>
			</view>
			<list :datalist='datalist'></list>

		</view>

	</view>
</template>

<script>
	
	import {consultList,consultType} from '@/api/index.js'
	import list from '@/components/list/index.vue'
	export default {
		data() {
			return {
				viewHeight: null,
				navbarHeight: null,
				datalist:[],
				nav: [],
				type:''
			};
		},
		components:{
			list
		},
		async onLoad() {



			const query = uni.createSelectorQuery().in(this);
			query.select('.nav').boundingClientRect(data => {
				if (data) {
					this.navbarHeight = data.height;
				}
			}).exec();
			query.select('.my-top').boundingClientRect(data => {
				if (data) {
					this.viewHeight = data.height;
				}
			}).exec();






		},
		mounted() {
			consultType({}).then(res=>{
				this.nav = res.rst
			})
			this.getconsultList()
		},
		methods: {
			navClick(id){
				this.datalist = []
				this.type = id
				this.getconsultList()
			},
		getconsultList(){
			uni.showLoading({
				title: '',
				mask: true
			});
			consultList({
				type : this.type
			}).then(res=>{
				uni.hideLoading();
				if (res.errno ==='0') {
					this.datalist = [...this.datalist, ...res.rst]
				} else {
					uni.showToast({
						title: res.errmsg,
						icon: 'none'
					});
				}
			})
		}
		}
	};
</script>


<style lang="scss" scoped>
	.main {
		width: 90%;
		margin: auto;
		padding: 42rpx 0;
	.item2 {
	
		box-sizing: border-box;
		.title {
			display: block;
			width: 288rpx;
			height: 90rpx;
		}
	}
		.nav {
			width: 100%;
			display: flex;
		flex-wrap: wrap;
			.item {
				/* 矩形 1 */
				width: 210rpx;
				height: 96rpx;
				margin-bottom: 24rpx;
				margin-right: 25rpx;
				color: #fff;
				background-size: 100% 100%;
				text-align: center;
				line-height: 96rpx;
				font-size: 28rpx;
				font-weight: 400;
			}

			.item:nth-child(3n) {
				margin-right: 0rpx;
			}
			.item:nth-of-type(1){
				background-image: url('https://xcx.xiaombt.com/img/img/1.png');
			}
			.item:nth-of-type(2){
				background-image: url('https://xcx.xiaombt.com/img/img/2.png');
			}
			.item:nth-of-type(3){
				background-image: url('https://xcx.xiaombt.com/img/img/3.png');
			}
			.item:nth-of-type(4){
				background-image: url('https://xcx.xiaombt.com/img/img/4.png');
			}
			.item:nth-of-type(5){
				background-image: url('https://xcx.xiaombt.com/img/img/5.png');
			}
			.item:nth-of-type(6){
				background-image: url('https://xcx.xiaombt.com/img/img/1.png');
			}
			.item:nth-of-type(7){
				background-image: url('https://xcx.xiaombt.com/img/img/2.png');
			}
			.item:nth-of-type(8){
				background-image: url('https://xcx.xiaombt.com/img/img/3.png');
			}
			.item:nth-of-type(9){
				background-image: url('https://xcx.xiaombt.com/img/img/4.png');
			}
			.item:nth-of-type(10){
				background-image: url('https://xcx.xiaombt.com/img/img/5.png');
			}
			.item:nth-of-type(11){
				background-image: url('https://xcx.xiaombt.com/img/img/1.png');
			}
			.item:nth-of-type(12){
				background-image: url('https://xcx.xiaombt.com/img/img/2.png');
			}
			.item:nth-of-type(13){
				background-image: url('https://xcx.xiaombt.com/img/img/3.png');
			}
			.item:nth-of-type(14){
				background-image: url('https://xcx.xiaombt.com/img/img/4.png');
			}
			.item:nth-of-type(15){
				background-image: url('https://xcx.xiaombt.com/img/img/5.png');
			}
			
			
			
		}
	}






	.my-top {
		width: 100%;
		background-color: #F2EFE9;
		position: fixed;
		z-index: 10000;
		top: 0;
		left: 0;

		.header {
			width: 100%;
			position: absolute;
			top: 0;
			left: 0;
		}

		.select {
			padding: 20rpx 38rpx;
			background-color: #fff;

			.center {
				width: 100%;
				height: 76rpx;
				position: relative;
				display: flex;
				align-items: center;
				padding: 20rpx 10rpx;
				box-sizing: border-box;
				justify-content: center;

				image {
					width: 100%;
					height: 100%;
					position: absolute;
					top: 0;
					left: 0;
				}
			}
		}

	}
</style>